<template>
  <div>
    <van-nav-bar title="我的矿机" left-arrow @click-left="$router.go(-1)"></van-nav-bar>
    <main>
      <van-row type="flex" justify="space-between">
        <van-col span="12">
          <van-button size="small" color="#464B79" @click="show=true">{{selected}}</van-button>
        </van-col>
        <van-col span="12">
          <van-button size="small" color="#464B79" @click="$router.push({ path: '/orepool' })">查看矿池</van-button>
        </van-col>
      </van-row>
      <van-row type="flex" justify="space-between">
        <van-col span="6">
          <p class="tab_text">
            <span>昨日挖矿收益</span>
            <span>1041.11</span>
          </p>
        </van-col>
        <van-col span="6">
          <p class="tab_text">
            <span>昨日挖矿收益</span>
            <span>1041.11</span>
          </p>
        </van-col>
        <van-col span="6">
          <p class="tab_text">
            <span>昨日挖矿收益</span>
            <span>1041.11</span>
          </p>
        </van-col>
      </van-row>
      <chartBar :chartData="chartData" />
    </main>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
  </div>
</template>

<script>
import chartBar from "../../components/chartBar.vue";
export default {
  name: "",
  components: {
    chartBar
  },
  data() {
    return {
      show: false,
      selected: "选项1",
      actions: [
        { name: "选项1" },
        { name: "选项2" },
        { name: "选项3", subname: "描述信息" }
      ],
      chartData: {
        title: "我的收益",
        data: [
          {
            count: 2,
            date: "11月10日"
          },
          {
            count: 2,
            date: "11月12日"
          },
          {
            count: 2,
            date: "11月13日"
          },
          {
            count: 2,
            date: "11月14日"
          },
          {
            count: 2,
            date: "11月15日"
          },
          {
            count: 2,
            date: "11月16日"
          },
          {
            count: 2,
            date: "11月17日"
          }
        ]
      }
    };
  },

  methods: {
    onSelect(item) {
      // 默认情况下，点击选项时不会自动关闭菜单
      // 可以通过 close-on-click-action 属性开启自动关闭
      this.show = false;
      this.selected = item.name;
    }
  }
};
</script>

<style lang="less" scoped>
main {
  padding: 20px 15px;
  .van-row {
    margin-bottom: 30px;
  }
  .van-col--12:nth-child(1) {
    text-align: left;
  }
  .van-col--12:nth-child(2) {
    text-align: right;
  }
  .van-button {
    width: 114.5px;
  }
  .tab_text {
    text-align: center;
    line-height: 20px;
    letter-spacing: 1px;
    > span:nth-child(1) {
      font-size: 12px;
      color: rgba(167, 167, 167, 0.6);
    }
    > span:nth-child(2) {
      font-size: 14px;
      color: #ffffff;
    }
  }
}
</style>
